<template>
    <div class="home_box">
        <header class="header_box" :class="{ active: !isTop }">
            <div class="left_box" :style="{ color: isTop ? '#1BAEAE' : '#fff' }">
                <van-icon name="wap-nav" />
            </div>
            <div class="middle_box" :style="{ background: isTop ? 'rgba(0,0,0,0.04)' : '#BBE7E7' }">
                <span>码路严选</span>
                <input placeholder="全新全员为学员服务" />

            </div>
            <div class="right_box" :style="{ color: isTop ? '#1BAEAE' : '#fff' }">
                <van-icon name="manager" />
            </div>
        </header>
        <!-- 轮播图  -->
        <van-swipe :autoplay="3000" class="my-swipe">
            <van-swipe-item v-for="item in myCarousels" :key="item">
                <img :src="item.carouselUrl" :alt="item.carouselUrl" />
            </van-swipe-item>
        </van-swipe>

        <!-- 宫格 -->
        <van-grid :column-num="5">
            <van-grid-item v-for="value in iconList" :key="value">
                <template #icon>
                    <div class="icon">
                        <van-icon :name="value.icon" color="#1BAEAE" size="60px" />
                    </div>
                </template>
                <template #text>
                    <div class="text">{{ value.text }}</div>
                </template>
            </van-grid-item>
        </van-grid>
        <!-- 新品上线 -->
        <GoodsView :dataItem="myNewGoodses">
            <template #title>
                <div>新品上线</div>
            </template>
        </GoodsView>
        <!-- 热销商品 -->
        <GoodsView :dataItem="myHotGoodses">
            <template #title>
                <div>热销商品</div>
            </template>
        </GoodsView>
        <!-- 最新推荐  -->
        <GoodsView :dataItem="myRecommendGoodses">
            <template #title>
                <div>最新推荐</div>
            </template>
        </GoodsView>
    </div>
</template>
<script setup>
import { getIndexInfo } from '@/api/index.js'
import { ref, onMounted, onBeforeUnmount, reactive, watchEffect } from "vue"
import GoodsView from '../../components/GoodsView.vue';
let isTop = ref(true);
onMounted(() => {
    getData()
})

watchEffect(() => {
    window.addEventListener('scroll', () => {
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 50) {
            isTop.value = false; // 添加背景色
        } else {
            isTop.value = true; // 移除背景色
        }
    })
})
let myCarousels = reactive([]);
let myHotGoodses = reactive([]);
let myNewGoodses = reactive([]);
let myRecommendGoodses = reactive([]);
let iconList = reactive([
    { icon: 'shopping-cart', text: '码路超市' },
    { icon: 'bag', text: '码路服饰' },
    { icon: 'invitation', text: '全球购' },
    { icon: 'star', text: '码路生鲜' },
    { icon: 'phone-circle', text: '码路到家' },
    { icon: 'gold-coin', text: '充值缴费' },
    { icon: 'goods-collect', text: '9.9元拼' },
    { icon: 'card', text: '领劵' },
    { icon: 'smile', text: '省钱' },
    { icon: 'more', text: '全部' },
])
// 获取数据 
let getData = async () => {
    let { data: { carousels, hotGoodses, newGoodses, recommendGoodses }, resultCode } = await getIndexInfo();
    if (resultCode == 200) {
        myCarousels.push(...carousels);
        myHotGoodses.push(...hotGoodses);
        myNewGoodses.push(...newGoodses);
        myRecommendGoodses.push(...recommendGoodses);
    }
}
</script>
<style lang="less" scoped>
.home_box {
    padding-bottom: 150px;

    .header_box {
        position: fixed;
        width: 100%;
        height: 80px;
        display: flex;
        top: 0;
        left: 0;
        z-index: 200;

        .left_box {
            width: 50px;
            background-color: transparent;
            height: 80px;
     
            line-height: 80px;
            text-align: center;

        }

        .middle_box {
            flex: auto;
        
            margin: 15px 20px;
            height: 50px;
            border-radius: 25px;
            padding-left: 20px;
            box-sizing: border-box;

            span {
                font-size: 28px;
                font-weight: bold;
                color: #1BAEAE;
                height: 50px;
                line-height: 50px;
                padding-right: 20px;
                border-right: 1px solid #000;
            }
            input{
                font-size: 22px;
                color: #000;
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                width: 280px;
                border: 0;
                box-sizing: border-box;
                background-color: transparent;
            }

        }

        .right_box {
            width: 50px;
            background-color: transparent;
            height: 80px;
            line-height: 80px;
            text-align: center;

        }

        &.active {
            background: #1baeae;
        }
    }

    .my-swipe .van-swipe-item {
        img {
            width: 100%;
            height: auto;
        }
    }

    .text {
        margin-top: 30px;
        font-size: 20px;
    }
}
</style>
